<template>
	<view class="">
		<view class="topHeader">
			<view :class="value === index ? 'item active' : 'item'" v-for="(item, index) in list" :key="item.id" @click="toUrl(item.url)">
				<view class="text">{{ item.name }}</view>
				<view class="line"></view>
			</view>
			<view class="item" @click="open"><i class="ico"></i></view>
		</view>
		<u-popup :show="show" @close="close" @open="open" mode="top" :round="10">
			<view class="top_region">
				<view class="title">
					<view class="left">服务大厅</view>
					<view class="right" @click="close">
						<view class="text">关闭</view>
						<i class="ico"></i>
					</view>
				</view>
				<view class="content">
					<view class="item">
						<i class="_index ico"></i>
						<view class="text">首页</view>
					</view>
					<view class="item">
						<i class="_huxuan ico"></i>
						<view class="text">互选</view>
					</view>
					<view class="item">
						<i class="_index ico"></i>
						<view class="text">认证</view>
					</view>
					<view class="item">
						<i class="_tg ico"></i>
						<view class="text">视频</view>
					</view>
					<view class="item">
						<i class="_hb ico">
							
							<b>新</b>
						</i>
						<view class="text">推广</view>
					</view>
					<view class="item">
						<i class="_video ico"></i>
						<view class="text">牵线</view>
					</view>
					<view class="item">
						<i class="_myhn ico"></i>
						<view class="text">活动</view>
					</view>
					<view class="item">
						<i class="_article ico"></i>
						<view class="text">学堂</view>
					</view>
					<view class="item">
						<i class="_vip ico"></i>
						<view class="text">开通VIP</view>
					</view>
					<view class="item">
						<image class="iconImg" src="../../static/photo_s0.png" mode=""></image>
						<view class="text">我的</view>
					</view>
				</view>
			</view>
		</u-popup>
		<tabbar></tabbar>
	</view>
</template>

<script>
export default {
	name: 'top-header',
	props:['value'],
	data() {
		return {
			show: false,
			list: [
				{
					id: 1,
					name: '推荐',
					url: '/pages/index/index'
				},
				{
					id: 2,
					name: '互选',
					url: ''
				},
				{
					id: 3,
					name: '活动',
					url: '/pages/activity/activity'
				},
				{
					id: 4,
					name: '视频',
					url: '/pages/video/video'
				},
				{
					id: 5,
					name: '红娘',
					url: '/pages/matchmaker/matchmaker'
				},
				{
					id: 6,
					name: '学堂',
					url: '/pages/school/school'
				}
			],
			current: 0
		};
	},
	methods: {
		open() {
			this.show = true;
		},
		close() {
			this.show = false;
		},
		toUrl(url){
			uni.navigateTo({
				url
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.topHeader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 20rpx;
	box-sizing: border-box;
	display: flex;
	z-index: 9;
	justify-content: space-around;
	align-items: center;
	background-color: #f5f5f5;
	.item {
		display: flex;
		align-items: center;
		flex-flow: column;
		.ico {
			font-size: 40rpx;
		}
	}
	.active {
		.text {
			font-weight: bold;
			font-size: 48rpx;
		}
		.line {
			width: 16rpx;
			height: 12rpx;
			background-color: #ff589b;
			border-radius: 10rpx;
			margin-top: 4rpx;
		}
	}
}
.top_region {
	padding: 0 20rpx 40rpx;
	box-sizing: border-box;
	.title {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
		box-sizing: border-box;
		align-items: center;
		font-size: 36rpx;
		.left {
		}
		.right {
			display: flex;
			align-items: center;
			.text {
				margin-right: 10rpx;
			}
			.ico {
				color: #ff6f6f;
			}
		}
	}
	.content {
		display: flex;
		flex-flow: wrap;
		.item {
			width: 25%;
			display: flex;
			flex-flow: column;
			align-items: center;
			margin: 24rpx 0;
			i {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 36rpx;
				position: relative;
				b {
					position: absolute;
					top: -0.5rem;
					right: -0.5rem;
					min-width: 0.8em;
					height: 0.8em;
					padding: 0.3rem;
					text-align: center;
					line-height: 0.8em;
					font-size: 22rpx;
					background: rgba(251, 92, 92, 0.8);
					font-style: normal;
					color: #fff !important;
					border-radius: 1.2em;
				}
			}
			.iconImg {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
			._index {
				background-color: #8addb9;
				background-image: -webkit-linear-gradient(135deg, #ff6f6f, #ffa2a2);
			}

			._huxuan {
				background-color: #8addb9;
				background-image: -webkit-linear-gradient(135deg, #43c38b, #8addb9);
			}

			._trend {
				background-color: #fd6eba;
				background-image: -webkit-linear-gradient(135deg, #fd6eba, #ffabd8);
			}

			._tg {
				background-color: #0dd068;
				background-image: -webkit-linear-gradient(135deg, #0dd068, #77e5aa);
			}

			._dating {
				background-color: #ea4c89;
				background-image: -webkit-linear-gradient(135deg, #ea4c89, #ff8eba);
			}

			._video {
				background-color: #6dadff;
				background-image: -webkit-linear-gradient(135deg, #6dadff, #b0ccef);
			}

			._shop {
				background-color: #ff9966;
				background-image: -webkit-linear-gradient(135deg, #ff9966, #ffd09d);
			}

			._hb {
				background-color: #ff604a;
				background-image: -webkit-linear-gradient(135deg, #ff794a, #ffb196);
			}

			._hn {
				background-color: #fd5941;
				background-image: -webkit-linear-gradient(135deg, #fd5941, #ff9586);
			}

			._myhn {
				background-color: #db7798;
				background-image: -webkit-linear-gradient(135deg, #db7798, #f29db9);
			}

			._party {
				background-color: #feb118;
				background-image: -webkit-linear-gradient(135deg, #feb118, #ffca60);
			}

			._article {
				background-color: #00d8d9;
				background-image: -webkit-linear-gradient(135deg, #0ebfc0, #9eebeb);
			}

			._qun {
				background-color: #d88cff;
				background-image: -webkit-linear-gradient(135deg, #d88cff, #ecc6ff);
				font-size: 2.2rem;
			}

			._msg {
				background-color: #4ebdf1;
				background-image: -webkit-linear-gradient(135deg, #4ebdf1, #8fdbff);
			}

			._vip {
				background-color: #d86ea3;
				background-image: -webkit-linear-gradient(135deg, #b28850, #d9b686);
			}
		}
	}
}
</style>
